<h1 class="site-h1"><i class="layui-icon layui-icon-table"></i> table 数据表格文档 - layui.table</h1>
<blockquote class="layui-elem-quote">
  table无疑是项目开发中，特别中后台页面使用最多的组件之一，需求一般来说也是最多样最复杂的，对于table的建设， 会保持一直在路上的状态。
</blockquote>

<fieldset class="layui-elem-field layui-field-title">
  <legend>功能加强</legend>
</fieldset>

<div class="site-text">
  <p>1. 让reload更加优雅。</p>

  <blockquote class="layui-elem-quote">
    layui官方的api对reload的说明是重载，也就是说我们可以在render的config的基础上，重载一些改变了的参数然后重新绘制出新的表格。项目中最常用的应该就是用它来更新where条件、page分页参数、sort排序信息来重新获取表格的数据，或者reload一份新的数据，目前reload实现逻辑对我们这个场景来说动静有点大，实际每次reload它背后都是一次render，区别就是是否有历史配置可继承而已，render的时候会将之前的表格视图给移除如果存在的话，然后根据config重新渲染一个新的表格视图，这个过程就会造成目前表格被提到次多较多的一个问题:reload的时候会闪一下，体验不好。另外一个，每次render实际都会new一个表格实例，加上一些事件的处理导致这个实例不会被GC，那么每次都重载的话实际会加大浏览器的负担。
  </blockquote>
  <blockquote class="layui-elem-quote">
    关于2.5.0新增的table.reload(id, options, type)；实际2.5版本的时候作者贤心就提出了解决的方案了，就是给reload加多一个参数
    的支持，在需要重载的时候可以重载，在需要重新查询一下数据之类的轻量级reload的时候加上type这个参数来提升用户体验，但是2.5.2已
    经将这个功能给去掉了，可能小伙伴会问为什么要开倒车，实际我的理解是，新增的参数做区别处理这个改变是进步的，但是更关键的是看怎么
    使用，估计很多人觉得会闪体验不好，然后升级到2.5.0以后就全部把reload都给带上第三个参数，那么这个是一个极端走向另外一个极端，
    并不是所有的reload都只是重新查询，有一些时候reload到的属性是会对原先的实例有较大影响的，这个时候恰恰必须是一个重载，
    但是使用者使用不恰当，导致添加的支持之后出现了其他不可控的问题，所以2.5.2版本将这个功能给回滚回去了，这里可见贤心的匠人精神，
    即使工具本身是好工具，也愿意为了存在使用者理解不到位一刀切的使用而出其他问题来背锅，暂缓这个功能等到更加完善之后再发布。
  </blockquote>
  <blockquote class="layui-elem-quote">
    之前关于这个如何更优雅的reload的处理，有过两个帖子：
    <ul>
      <li><a doc-href="https://dev.layuion.com/jie/33664/" target="_blank">table 如何更优雅的 reload</a></li>
      <li><a doc-href="https://dev.layuion.com/jie/43423/" target="_blank">table 如何更优雅的 reload（第二版）</a></li>
    </ul>
    有兴趣的小伙伴可以看看，里面大概的体现了解决这个问题的思路过程以及遇到的问题，早期的做法其实跟2.5.0的做法一样就是新增一个第三参数来决定是重载还是重新请求数据，随即就考虑如何更加方便地使用，力求更新之后不需要修改之前的逻辑代码就能够生效，就采用了在reload内部里面通过查询白名单的形式，只要调用reload的时候带的config里面的key都在白名单中，那么就认为是一次轻量级的reload，只重新请求数据不重载，继续优化将请求参数白名单制改成重载参数黑名单制，这个修改就可以避免自定义属性加入要频繁的将参数名注册到白名单中且易遗漏出错的风险。
  </blockquote>

</div>

<script>
  layui.use(['code', 'form'], function () {
    var code = layui.code;
    var $ = layui.$;
    var form = layui.form;
    code();
  })
</script>

